<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>API提取</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <style type="text/css" rel="stylesheet">
      .layui-form-pane .layui-form-label {
        width: 150px;
      }
      .layui-form-pane .layui-input-block {
        margin-left: 150px;
      }
      .last-form-item {
        padding-top: 10px;
      }
    </style>
  </head>
  <body class="pear-container">
    <!-- Api 提取 -->
    <div class="layui-card">
      <div class="layui-card-body">
        <form class="layui-form layui-form-pane" lay-filter="apiextract">
          <div class="layui-form-item" pane>
            <label class="layui-form-label">选择订单</label>
            <div class="layui-input-block">
              <div id="select-order" name="select-order"></div>
            </div>
          </div>
          <div class="layui-form-item" pane>
            <label class="layui-form-label">返回格式</label>
            <div class="layui-input-block">
              <input type="radio" name="format" value="1" title="txt" checked />
              <input type="radio" name="format" value="2" title="json" />
            </div>
          </div>
          <div class="layui-form-item" pane>
            <label class="layui-form-label">行分隔符</label>
            <div class="layui-input-block">
              <input
                type="radio"
                name="line"
                value="1"
                title="\r\n"
                checked
                lay-filter="line"
              />
              <input
                type="radio"
                name="line"
                value="2"
                title="\n"
                lay-filter="line"
              />
              <input
                type="radio"
                name="line"
                value="3"
                title="空格分割"
                lay-filter="line"
              />
              <input
                type="radio"
                name="line"
                value="4"
                title="自定义"
                lay-filter="line"
              />
            </div>
          </div>
          <!-- NOTE: 只有选择自定义换行符才展示 -->
          <div
            class="layui-form-item"
            lay-filter="custom-linebreak"
            pane
            style="display: none"
          >
            <label class="layui-form-label">自定义行分隔符</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="custom_line"
                placeholder="请输入自定义行分隔符"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item" pane>
            <label class="layui-form-label">输出样式定制</label>
            <div class="layui-input-block">
              <input type="radio" name="output" value="1" title="SK5" checked />
              <input type="radio" name="output" value="2" title="http" />
            </div>
          </div>
          <div class="layui-form-item" pane>
            <label class="layui-form-label">Token有效时间(天)</label>
            <div class="layui-input-block">
              <input
                type="number"
                name="expire_time"
                min="0"
                class="layui-input"
              />
            </div>
          </div>
          <div style="margin-top: -15px; color: #999">
            <i>不填写默认无限期, 但是节点到期后就不会再输出</i>
          </div>

          <div class="layui-form-item last-form-item">
            <div class="layui-input-block">
              <button
                type="button"
                class="pear-btn pear-btn-primary"
                id="confirm"
              >
                确定生成
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/admin/js/permission.js"></script>
    <script src="/app/admin/admin/js/common.js"></script>
    <script>
      // API提取-订单列表
      const API_ORDERLLIST = '/app/admin/v1-api/getOrderList'
      // API提取-生成
      const API_GENERATE = '/app/admin/v1-api/createApi'

      const page = 1
      const limit = 100
      /**
       * 请求接口
       */
      const fetch = (url, formData = { page: 1, limit: limit}, callback) => {
        layui.$.ajax({
          url,
          type: 'POST',
          data: formData,
          success: function (res) {
            if (res.code) {
              layui.popup.error(res.msg)
              layui.layer.closeAll('loading')
              return
            }
            callback(res)
          },
        })
      }

      /** API提取-订单列表 */
      const fetchOrderList = (formData, callback) =>
        fetch(API_ORDERLLIST, formData, callback)

      /** API提取-生成 */
      const fetchGenerateApi = (formData, callback) =>
        fetch(API_GENERATE, formData, callback)

      layui.use(
        [
          'table',
          'form',
          'common',
          'popup',
          'util',
          'xmSelect',
          'element',
          'layer',
        ],
        // 'select', 'code'
        function () {
          let table = layui.table
          let form = layui.form
          let $ = layui.$
          let common = layui.common
          let util = layui.util
          let element = layui.element
          let layer = layui.layer
          let popup = layui.popup
          // let select = layui.select
          // layui.code()

          form.on('radio(line)', function (data) {
            const customLine = $('div[lay-filter="custom-linebreak"]')
            if (data.value == 4) customLine.show()
            else customLine.hide()
          })

          $('#confirm').on('click', function () {
            const formData = form.val('apiextract')
            if (!formData.order_ids) {
              layui.popup.failure('请选择订单')
              return
            }
            if (formData.line == 4 && !formData.custom_line) {
              layui.popup.failure('请输入自定义行分隔符')
              return
            }
            formData.order_ids = formData.order_ids.split(',')

            layer.load()
            fetchGenerateApi(
              {
                ...formData,
              },
              (result) => {
                layer.closeAll('loading')
                const { api_url } = result.data
                layer.open({
                  title: '信息',
                  content: `
                  <div>token: ${api_url}</div>
                  <p style="color: red;">Token只会显示一次，请记住后点击确定，如果遗忘，可以重新生成</p>
                  `,
                  yes: function (index, layero) {
                    copyText(api_url)
                    layer.close(index) //如果设定了yes回调，需进行手工关闭
                  },
                })
              }
            )
          })

          const smSelectInstance = renderSelectOrder()
        }
      )

      function renderSelectOrder() {
        return xmSelect.render({
          el: '#select-order',
          name: 'order_ids',
          prop: {
            name: 'name',
            value: 'id',
          },
          data: [],
          toolbar: { show: true, list: ['ALL', 'CLEAR', 'REVERSE'] },
          autoRow: true,
          paging: true,
          pageSize: limit,
          pageRemote: true,
          remoteMethod: function (val, cb, show, pageIndex) {
            fetchOrderList(
              {
                limit,
                page: pageIndex,
              },
              (result) => {
                const { data, last_page } = result.data
                cb(
                  data.map((item) => ({
                    ...item,
                    name: `订单号：${item.name}`,
                  })), last_page
                )
              }
            )
          },
        })
      }
    </script>
  </body>
</html>
